<template>
  <div class="category">
    <div class="header">
      <h2>分类管理</h2>
      <el-button type="primary" @click="handleAdd">添加分类</el-button>
    </div>

    <el-table :data="productStore.categories" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="name" label="分类名称" />
      <el-table-column label="操作" width="200">
        <template #default="{ row }">
          <el-button-group>
            <el-button size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDelete(row)"
            >删除</el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      v-model="dialogVisible"
      :title="formType === 'add' ? '添加分类' : '编辑分类'"
      width="30%"
    >
      <el-form
        ref="formRef"
        :model="categoryForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="categoryForm.name" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useProductStore } from '@/stores/product'
import type { Category } from '@/types/product'

const productStore = useProductStore()

const dialogVisible = ref(false)
const formType = ref<'add' | 'edit'>('add')
const formRef = ref()

const categoryForm = reactive({
  id: 0,
  name: ''
})

const rules = {
  name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ]
}

const handleAdd = () => {
  formType.value = 'add'
  categoryForm.id = 0
  categoryForm.name = ''
  dialogVisible.value = true
}

const handleEdit = (row: Category) => {
  formType.value = 'edit'
  Object.assign(categoryForm, row)
  dialogVisible.value = true
}

const handleDelete = (row: Category) => {
  ElMessageBox.confirm('确定要删除该分类吗？', '提示', {
    type: 'warning'
  }).then(() => {
    productStore.deleteCategory(row.id)
    ElMessage.success('删除成功')
  })
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate((valid: boolean) => {
    if (valid) {
      if (formType.value === 'add') {
        productStore.addCategory({
          id: Date.now(),
          name: categoryForm.name
        })
      } else {
        productStore.updateCategory(categoryForm)
      }
      
      dialogVisible.value = false
      ElMessage.success(formType.value === 'add' ? '添加成功' : '更新成功')
    }
  })
}
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style> 